<template>
  <div class="newslistContainer">
    <!-- v-infinite-scroll="loadMore"用来发起ajax请求 -->
    <!--  infinite-scroll-disabled="loading"用来设置组件是否还向服务器发送ajax请求，为bool类型值
              infinite-scroll-distance="10" 用来设置用户上划距离多远时触发ajax请求-->
    <ul
      class="newslist"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="isLoading"
      infinite-scroll-distance="100"
      style="max-height:100vh; overflow-y:auto;"
    >
      <li v-for="item in list" :key="item.index">
        <router-link :to="'/home/newsinfo/' + item.id">
          <p class="news_list">{{ item.title }}</p>
          <p class="news_des">
            <span class="author">编辑：{{ item.author }}</span>
            <span class="add_time">时间：{{ item.add_time | dateFormat }}</span>
          <span class="click_count">阅读量：{{ item.click_count }}</span>
          </p>
          </router-link>
      </li>
      <!-- 加载动画 -->
      <li class="more_loading">
        <mt-spinner class="spinner_p" type="fading-circle" v-show="is_loading_more"></mt-spinner>
        <span v-show="finished">已经加载全部信息</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
    name:'newslist',
   data() {
    return {
       list: [], //新闻列表
      isLoading: false, //默认相应上划动作
      pageindex: 1,
      pagesize: 10,
      is_loading_more: false, //控制加载图标是否出现
      finished: false, //控制加载全部数据后显示
    };
  },
  methods: {
    loadMore: function () {
      this.isLoading = true;
      this.is_loading_more = true; //截流，防止额外的请求数据，显示加载图标
      this.finished = false,
        this.$ajax({
          method: "get",
          url: "/news/newslist",
          params: {
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        }).then((response) => {
          
          var data = response.data;
          if (data.Status == 0) {
            data.Data.forEach((item) => {
              item.add_time = new Date();
            });
            this.list = this.list.concat(data.Data);
            this.isLoading = false; //允许响应上划动作
            this.pagesize++;
            
            this.is_loading_more = false;
            if (data.Data.lenght < this.pagesize) {
              this.isLoading = true;
              this.finished = true; //加载完成
            }
          } else {
            //服务器未响应
            this.finished = true;
          }
        });
    },
  },
  //   created() {
  //     this.loadMore();
  //   },
};
</script>
<style lang="less">
.newslistContainer {
  .newslist {
    list-style: none;
    padding: 0 10px;
    li {
      border-bottom: 1px solid #ddd;
      padding: 10px 0;
      p {
        margin: 0;
      }
      p.news_list {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
      p.news_des {
        font-size: 12px;
        color: #aaa;
        padding-top: 5px;
        display: flex;
        justify-content: space-between;
      }
    }
    .more_loading {
      font-size: 12px;
      color: #aaa;
      text-align: center;
      border: none;
      .spinner_p {
        position: relative;
        left: 45%;
      }
    }
  }
}
</style>